<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原型模块</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <style>
        /* 去掉左右边距 */
        .part_imgText ul li {
            padding-left: 0px;
            padding-right: 0px;
        }

        .part_imgText ul li {
            display: flex;
            justify-content: center;
        }

        /* 右边的文字 */
        .part_imgText_box {
            width: 800px;
        }

        .part_imgText_box .public_title h2 {
            padding-bottom: 22px;
        }

        .public_title_text {
            padding-top: 60px;
        }

        .public_title_text p {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }

        .public_title_text p:first-child {
            padding-bottom: 60px;
            color: var(--c_subtitle);
            font-size: var(--f_describe);
            line-height: var(--l_describe);
        }

        /* 右边的背景图 */
        .part_imgText_img {
            width: 800px;
            max-height: 460px;
            line-height: 460px;
            border-radius: 20px;
            background-color: #fff;
            border: 1px solid #ffff;
            box-shadow: 0px 0px 20px #f0eeee;
            text-align: center;
        }

        .part_imgText_img img {
            width: 710px;
            height: 375px;
        }

        @media (max-width:1200px) {
            .part_imgText ul {
                display: flex;
                flex-direction: column;
                /* flex-direction: row-reverse; */
            }

            .part_imgText_box .public_title h2 {
                padding-bottom: 12px;
            }

            .public_title_text {
                padding-top: 20px;
            }


            .part_imgText_box {
                padding: 0px 20px 20px 20px;
            }

            .part_imgText_img {
                padding: 20px 20px 20px 20px;

            }

            /* 右边的背景图 */
            .part_imgText_img {
                width: 100%;
                height: 100%;
                line-height: 100%;
            }

            .part_imgText_img img {
                width: 100%;
                height: 100%;

            }

            .public_title_text p:first-child {
                padding-bottom: 0px;
            }
        }
    </style>
</head>

<body>
    <div class="part_imgText modular">
        <ul class="row">
            <li class="col-xl-6 col-12">
                <div class="part_imgText_box">
                    <div class="public_title">
                        <h2>拥有从策略到设计</h2>
                        <p>ABOUT US</p>
                        <div class="public_title_text">
                            <p>
                                多年包装行业设计，精英团队亲自把关，专业先进设备，保证生产质量，
                                好包装的使用约等于省下45%的营销成本，我们的核心服务是通过科学有效的、
                                国际化的设计和品牌管理之道帮助客户构建良好的品牌体系，
                                协助更多的中国企业塑造国际化的品牌形象，
                                在世界范围内树立属于中国企业的优秀的品牌形象和人文风格
                            </p>
                            <p>
                                我司汇集了一群经验丰富、思想前卫、富有创造力的平面设计师，
                                在印前为客户提供合理和策划和精益求精的设计方案，
                                并拥有一批长期从事印刷纸品包装产品的专业生技术人员及经验丰富的管理团队
                            </p>
                        </div>
                    </div>
                </div>
            </li>
            <li class="col-xl-6 col-12">
                <div class="part_imgText_img">
                    <img src="../images/part_imgText12-two.jpg" alt="">
                </div>
            </li>
        </ul>
    </div>
</body>

</html>